<template>
  <div class="mobile-order-container">
    <!-- 移动端搜索栏 -->
    <MobileSearchBox :data="searchData" @search="handleSearch" @reset="handleReset" />
    
    <!-- 移动端订单列表 -->
    <MobileOrderList 
      :loading="loading" 
      :list="list" 
      @refresh="getList"
      @info="handleInfo"
      @refund="handleRefund"
      @remake="handleReMake"
    />
    
    <!-- 分页 -->
    <div class="pagination-container" v-show="paginationData.total > 0">
      <el-pagination
        :current-page="paginationData.page"
        :page-size="paginationData.size"
        :total="paginationData.total"
        layout="prev, pager, next"
        @current-change="handlePaginationChange"
        small
      />
    </div>
    
    <!-- 订单详情弹窗 -->
    <InfoDialog v-if="infoData.bSwitch" :data="infoData" />
  </div>
</template>

<script>
import MobileSearchBox from './components/MobileSearchBox.vue'
import MobileOrderList from './components/MobileOrderList.vue'
import InfoDialog from '../components/InfoDialog.vue'
import { listOrder } from '@/api/order'
import { refundPay, reMakePay } from '@/api/order'

export default {
  name: 'MobileOrder',
  components: {
    MobileSearchBox,
    MobileOrderList,
    InfoDialog
  },
  data() {
    return {
      list: [],
      loading: false,
      searchData: {
        outTradeNo: null,  // 支付号
        uuid: null,        // 订单号
        selectedDate: null, // 选择的日期
        timeRange: []      // 时间范围
      },
      paginationData: {
        total: 0,
        page: 1,
        size: 10
      },
      infoData: {
        id: null,
        bSwitch: false
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 搜索
    handleSearch() {
      this.paginationData.page = 1
      this.getList()
    },
    
    // 重置搜索
    handleReset() {
      this.searchData = {
        outTradeNo: null,
        uuid: null,
        selectedDate: null,
        timeRange: []
      }
      this.paginationData.page = 1
      this.getList()
    },
    
    // 获取列表数据
    async getList() {
      const { outTradeNo, uuid, timeRange } = this.searchData
      const { page, size } = this.paginationData
      
      const params = {
        outTradeNo,
        uuid,
        pageNum: page,
        pageSize: size,
        orderByColumn: 'createDate',
        isAsc: 'desc'
      }
      
      // 如果有时间范围，添加到参数中
      if (timeRange && timeRange.length === 2) {
        params.queryStartTime = timeRange[0]
        params.queryEndTime = timeRange[1]
      }
      
      this.loading = true
      try {
        const response = await listOrder(params)
        this.list = response.rows || []
        this.paginationData.total = response.total || 0
      } catch (error) {
        console.error('获取订单列表失败:', error)
        this.$modal.msgError('获取订单列表失败')
      } finally {
        this.loading = false
      }
    },
    
    // 分页
    handlePaginationChange(page) {
      this.paginationData.page = page
      this.getList()
    },
    
    // 查看详情
    handleInfo(row) {
      this.infoData.id = row.uuid
      this.infoData.bSwitch = true
    },
    
    // 退款
    handleRefund(row) {
      // 订单完成48小时后并且不是admin不能退款，只有admin可以退款
      console.log(this.$store.getters.roles)
      const isOverTime = new Date(row.finishDate).getTime() + 48 * 60 * 60 * 1000 > new Date().getTime()
      const isAdmin = this.$store.getters.roles.includes('admin')
      if(isOverTime && !isAdmin) {
        this.$modal.msgError("订单完成48小时后不能退款， 特殊情况请联系超级管理员！")
        return
      }
      this.$confirm(`订单号：${row.uuid}，是否发起退款?`, '提示', {
        confirmButtonText: '退款',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          uuid: row.uuid,
          reason: '系统退款'
        }
        refundPay(params).then(res => {
          if (res.code === 200) {
            this.getList()
            this.$modal.msgSuccess("退款成功")
          }
        }).catch(() => {
          this.$modal.msgError("退款失败")
        })
      })
    },
    
    // 重新制作
    handleReMake(row) {
      this.$confirm(`套系：${row.name} 支付单号：${row.outTradeNo} 订单号：${row.uuid} 是否重新制作?`, '提示', {
        confirmButtonText: '重新制作',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          uuid: row.uuid
        }
        reMakePay(params).then(res => {
          if (res.code === 200) {
            this.getList()
            this.$modal.msgSuccess("重新制作成功")
          }
        }).catch(() => {
          this.$modal.msgError("重新制作失败")
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './styles/mobile.scss';

.mobile-order-container {
  padding: 10px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  background: white;
  margin-top: 10px;
  border-radius: 8px;
}

// 移动端优化
@media (max-width: 768px) {
  .mobile-order-container {
    padding: 5px;
  }
}
</style>
